{% extends 'scm/base.html' %}

{% block content %}

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Create Purchase Request</h3>

        <a href="{% url 'pr' %}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i>
            Back
        </a>
    </div>

    <div class="card petrogl-form-container">
        <div class="card-body">

            <form method="POST">

                {% csrf_token %}

                <div class="row g-3">

                    <div class="col-md-4">
                        <label class="form-label">PR No</label>
                        <input type="text"
                               name="pr_no"
                               class="form-control"
                               required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">PR Date</label>
                        <input type="date"
                               name="pr_date"
                               class="form-control"
                               value="{{ request.POST.pr_date }}"
                               required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">PR Title</label>
                        <input type="text"
                               name="pr_title"
                               class="form-control"
                               required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Requester</label>
                        <input type="text"
                               name="requester"
                               class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Department</label>

                        <select name="department"
                                class="form-select"
                                required>

                            <option value="">Select Department</option>

                            {% for item in department_items %}
                            <option value="{{ item.dept_name }}">
                                {{ item.dept_name }}
                            </option>
                            {% endfor %}

                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Cost Center</label>

                        <select name="cost_center"
                                class="form-select"
                                required>

                            <option value="">Select Cost Center</option>

                            {% for item in cc_items %}
                            <option value="{{ item.cc_no }}">
                                {{ item.cc_no }} - {{ item.cc_name }}
                            </option>
                            {% endfor %}

                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Source of Fund</label>

                        <select name="source_of_fund"
                                class="form-select"
                                required>

                            <option value="">Select Source of Fund</option>
                            <option value="AFE">AFE</option>
                            <option value="WP&B">WP&B</option>

                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Required Date</label>

                        <input type="date"
                               name="required_date"
                               class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Priority</label>

                        <select name="priority"
                                class="form-select">

                            <option value="Normal">Normal</option>
                            <option value="Urgent">Urgent</option>
                            <option value="High">High</option>

                        </select>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Purpose</label>

                        <textarea name="purpose"
                                  class="form-control"
                                  rows="3"></textarea>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Remarks</label>

                        <textarea name="remarks"
                                  class="form-control"
                                  rows="3"></textarea>
                    </div>

                </div>


                <!-- PR ITEMS -->

                <div class="mt-4">

                    <div class="d-flex justify-content-between align-items-center mb-2">

                        <h5 class="mb-0">
                            PR Items
                        </h5>

                        <button type="button"
                                class="btn btn-secondary btn-sm"
                                onclick="addItem()">

                            <i class="bi bi-plus-lg"></i>
                            Add Item

                        </button>

                    </div>


                    <!-- Hidden KIMAP options template -->

                    <select id="kimapOptionsTemplate"
                            style="display: none;">

                        <option value="">
                            Select KIMAP
                        </option>

                        {% for item in kimap_items %}

                        <option value="{{ item.id }}"
                                data-kimap="{{ item.kimap|escape }}"
                                data-name="{{ item.name|escape }}"
                                data-acct-no="{{ item.acct_no|escape }}"
                                data-uom="{{ item.uom|escape }}"
                                data-location="{{ item.location|escape }}">

                            {{ item.kimap }} - {{ item.name }}

                            {% if item.location %}
                            ({{ item.location }})
                            {% endif %}

                        </option>

                        {% endfor %}

                    </select>


                    <div class="table-responsive">

                        <table class="table table-bordered table-striped align-middle"
                               id="itemsTable">

                            <thead>

                                <tr>

                                    <th style="width: 18%;">
                                        KIMAP
                                    </th>

                                    <th style="width: 18%;">
                                        Description
                                    </th>

                                    <th style="width: 12%;">
                                        Account No
                                    </th>

                                    <th style="width: 8%;">
                                        Qty
                                    </th>

                                    <th style="width: 8%;">
                                        UOM
                                    </th>

                                    <th style="width: 12%;">
                                        Required Date
                                    </th>

                                    <th style="width: 12%;">
                                        Location
                                    </th>

                                    <th style="width: 10%;">
                                        Remarks
                                    </th>

                                    <th style="width: 5%;"></th>

                                </tr>

                            </thead>

                            <tbody id="itemsBody">
                            </tbody>

                        </table>

                    </div>

                </div>


                <input type="hidden"
                       name="item_count"
                       id="item_count"
                       value="0">


                <div class="mt-4">

                    <button type="submit"
                            class="btn btn-secondary">

                        <i class="bi bi-check-lg"></i>
                        Save PR

                    </button>

                    <a href="{% url 'pr' %}"
                       class="btn btn-secondary">

                        <i class="bi bi-x-lg"></i>
                        Cancel

                    </a>

                </div>

            </form>

        </div>
    </div>

</div>


<style>

    .petrogl-form-container {
        background-color: #dee2e6;
        border: 0;
        border-radius: 0.375rem;
    }

    .petrogl-form-container .form-control,
    .petrogl-form-container .form-select {
        background-color: #ffffff;
    }

    .petrogl-form-container .form-control:focus,
    .petrogl-form-container .form-select:focus {
        border-color: #6c757d;
        box-shadow: 0 0 0 0.15rem rgba(108, 117, 125, 0.20);
    }

    #itemsTable {
        background-color: #ffffff;
    }

    #itemsTable th {
        font-weight: 600;
    }

    .item-action-btn {
        width: 34px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

</style>


<script>

    let itemCount = 0;


    function addItem() {

        const tbody = document.getElementById('itemsBody');

        const template = document.getElementById(
            'kimapOptionsTemplate'
        );

        const row = document.createElement('tr');

        row.id = `item_row_${itemCount}`;

        const options = template.innerHTML;


        row.innerHTML = `

        <td>

            <select
                name="kimap_id_${itemCount}"
                class="form-select form-select-sm"
                onchange="loadKimap(${itemCount})"
                required
            >

                ${options}

            </select>

        </td>


        <td>

            <input
                type="text"
                id="description_${itemCount}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="text"
                id="acct_no_${itemCount}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="number"
                name="quantity_${itemCount}"
                class="form-control form-control-sm"
                min="0"
                step="0.0001"
                value="1"
                required
            >

        </td>


        <td>

            <input
                type="text"
                id="uom_${itemCount}"
                class="form-control form-control-sm"
                readonly
            >

        </td>


        <td>

            <input
                type="date"
                name="required_date_${itemCount}"
                class="form-control form-control-sm"
            >

        </td>


        <td>

            <input
                type="text"
                name="location_${itemCount}"
                id="location_${itemCount}"
                class="form-control form-control-sm"
            >

        </td>


        <td>

            <input
                type="text"
                name="item_remarks_${itemCount}"
                class="form-control form-control-sm"
            >

        </td>


        <td class="text-center">

            <button
                type="button"
                class="btn btn-danger btn-sm item-action-btn"
                onclick="removeItem(${itemCount})"
                title="Remove Item"
            >

                <i class="bi bi-trash"></i>

            </button>

        </td>

        `;


        tbody.appendChild(row);

        itemCount++;

        document.getElementById('item_count').value = itemCount;

    }


    function loadKimap(index) {

        const select = document.querySelector(
            `select[name="kimap_id_${index}"]`
        );

        if (!select) {
            return;
        }


        const selectedOption =
            select.options[select.selectedIndex];


        if (!selectedOption || !selectedOption.value) {

            document.getElementById(
                `description_${index}`
            ).value = '';

            document.getElementById(
                `acct_no_${index}`
            ).value = '';

            document.getElementById(
                `uom_${index}`
            ).value = '';

            document.getElementById(
                `location_${index}`
            ).value = '';

            return;
        }


        document.getElementById(
            `description_${index}`
        ).value =
            selectedOption.dataset.name || '';


        document.getElementById(
            `acct_no_${index}`
        ).value =
            selectedOption.dataset.acctNo || '';


        document.getElementById(
            `uom_${index}`
        ).value =
            selectedOption.dataset.uom || '';


        document.getElementById(
            `location_${index}`
        ).value =
            selectedOption.dataset.location || '';

    }


    function removeItem(index) {

        const row = document.getElementById(
            `item_row_${index}`
        );

        if (row) {
            row.remove();
        }

    }

</script>

{% endblock %}